<!DOCTYPE html>

<html lang="en-US">
<@common.header/>

<body class="page-sub-page page-property-detail" id="page-top">
<!-- Wrapper -->
<div class="wrapper">
    <!-- Navigation -->
    <@common.nav/><!-- /.navigation -->
    <!-- end Navigation -->
    <!-- Page Content -->
    <div id="page-content">
        <!-- Breadcrumb -->
        <div class="container">
            <ol class="breadcrumb">
                <li><a href="#">主页</a></li>
                <li class="active">房产详情</li>
            </ol>
        </div>
        <!-- end Breadcrumb -->

        <div class="container">
            <div class="row">
                <!-- Property Detail Content -->
                <div class="">
                    <section id="property-detail">
                        <header class="property-title">
                            <h1>${house.name}</h1>
                            <figure>${house.address}</figure>

                        <#if loginUser??>
                            <span class="actions">
                                <!--<a href="#" class="fa fa-print"></a>-->
                                <a href="#" class="bookmark" data-bookmark-state="empty"
                                ><span class="title-add">Add to bookmark</span><span class="title-added">Added</span></a>
                            </span>
                       </#if>
                        </header>
                        <div class="row">
                            <div  class="col-md-6 col-sm-6">
                                <section id="property-gallery">
                                    <div class="owl-carousel property-carousel">
                                        <#list house.imageList as image>
                                           <div class="property-slide" >
                                              <a href="${image}" class="image-popup">
                                                 <div class="overlay"><h3>Front View</h3></div>
                                                 <img alt="" src="${image}" >
                                             </a>
                                           </div><!-- /.property-slide -->
                                        </#list>
                                    </div><!-- /.property-carousel -->
                                    <div class="icon"><i class="vr_icon"></i>本房源已支持VR看房，在线看房，省时省力</div>
                                </section>
                            </div>
                            <div class="col-md-6 col-sm-6" style="font-size: 16px;font-weight: 600">
                                <section id="quick-summary" class="clearfix">
                                    <dl style="margin: 5px;">
                                        <dt>地址:</dt>
                                        <dd >${house.address}</dd>
                                        <dt>价格:</dt>
                                        <dd><span class="tag price">${house.price}万</span></dd>
                                        <dt>面积:</dt>
                                        <dd>${house.area} m<sup>2</sup></dd>
                                        <dt>布局:</dt>
                                        <dd>${house.beds}室1厅${house.baths}卫</dd>
                                        <dt>评分:</dt>
                                        <dd><div class="rating rating-overall" data-score="${house.rating}" style="float: left"></div></dd>
                                    </dl>
                                </section><!-- /#quick-summary -->
                                <section id="quick-summary" class="clearfix">
                                    <header><h1 >经纪人</h1></header>
                                    <div class="row">
                                        <div class="col-md-5 col-sm-5" >
                                           <#--<a  href="/agency/agentDetail?id=${(agent.id)!}"><img alt="" src="${(agent.avatar)!}"></a>-->
                                               <img alt="" src="${(agent.avatar)!}" style="display:block;width: 200px;height: 200px;">
                                        </div>
                                        <div class="col-md-4 col-sm-4">
                                            <h3 style="font-weight: 700;font-size: 18px;">${(agent.name)!}</h3>
                                            <dl>
                                                <dt>手机:</dt>
                                                <dd>${(agent.phone)!}</dd>
                                                <dt>Email:</dt>
                                                <dd><a href="mailto:#">${(agent.email)!}</a></dd>
                                                <dt>QQ:</dt>
                                                <dd>76462894</dd>
                                                <dt>&nbsp;&nbsp;&nbsp;</dt>
                                                <dd>&nbsp;&nbsp;&nbsp;</dd>
                                            </dl>

                                        </div>
                                        <div class="col-md-2 col-sm-2">
                                            <a   target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=76462894&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:76462894:53" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
                                        </div>
                                    </div>
                                    <#--<aside class="agent-info clearfix">-->
                                        <#--<figure><a href="/agency/agentDetail?id=${(agent.id)!}"><img alt="" src="${(agent.avatar)!}"></a></figure>-->

                                    <#--</aside><!-- /.agent-info &ndash;&gt;-->
                                </section><!-- /#quick-summary -->
                                </div><!-- /.col-md-7 -->
                            </div><!-- /.col-md-4 -->
                        </div>
                        <div class="row" ">

                            <div class="">
                                <section id="description">
                                    <header><h1>房屋描述</h1></header>
                                    ${house.remarks}
                                </section><!-- /#description -->
                                <section id="property-features">
                                    <header><h2>房屋特点</h2></header>
                                    <ul class="list-unstyled property-features-list" >
                                    <#list house.featureList as feature> 
                                        <li >${feature}</li>
                                    </#list>
                                    </ul>
                                </section><!-- /#property-features -->
                                <section id="floor-plans">
                                    <div class="floor-plans" >
                                        <header><h2>户型图</h2></header>
                                         <#list house.floorPlanList as floorPlan> 
                                            <a href="${floorPlan}" class="image-popup"><img alt="" src="${floorPlan}" ></a>
                                         </#list>
                                    </div>
                                </section><!-- /#floor-plans -->
                               <!--   <section id="property-map">
                                    <header><h2>Map</h2></header>
                                    <div class="property-detail-map-wrapper">
                                        <div class="property-detail-map" id="property-detail-map"></div>
                                    </div>
                                </section> -->
                                <section id="property-rating">
                                    <header><h2>评价</h2></header>
                                    <div class="clearfix">
                                        <aside>
                                            <header>您的评价</header>
                                            <div class="rating rating-user">
                                                <div class="inner"></div>
                                            </div>
                                        </aside>
                                        <figure>
                                            <header>总体评价</header>
                                            <div class="rating rating-overall" data-score="${house.rating}"></div>
                                        </figure>
                                    </div>
                                    <div class="rating-form">
                                    </div><!-- /.rating-form -->
                                </section><!-- /#property-rating -->
                                

                                <section>
                                    <header style="margin-top: 20px;"><h2>评论</h2></header>
                                    <div id="SOHUCS" sid="house${house.id}"></div>


                                </section>
                            </div><!-- /.col-md-8 -->
                           

                            
                        </div>
                    </section>
                </div>




        </div>
    </div>

    <!-- end Page Content -->
    <!-- Page Footer -->
   <@common.footer/>
    <!-- end Page Footer -->
</div>
<!-- <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyABT1kCnk8CW4Ckpd0RisUg25PIdDD3Gfg"></script> -->

<@common.js/>

<!--[if gt IE 8]>
<script type="text/javascript" src="/static//js/ie.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="https://changyan.sohu.com/upload/changyan.js" ></script>
<script type="text/javascript">
    window.changyan.api.config({
        appid: 'cyuckOlOS',
        conf: '1e3dcb20deaec3a01f4027ce22b9b071'
    });
</script>
 <script  type="text/javascript" >
    
    $(window).load(function(){
        initializeOwl(false);
    });


     $(document).ready(function() {
          var errorMsg   = "${errorMsg!""}";
          var successMsg = "${successMsg!""}";
          if(errorMsg){ 
              errormsg("error",errorMsg);
          }
          if(successMsg) {
              successmsg("success",successMsg);
          }

           var ratingUser = $('.rating-user');
            if (ratingUser.length > 0) {
                $('.rating-user .inner').raty({
                    path: '/static/assets/img',
                    starOff : 'big-star-off.png',
                    starOn  : 'big-star-on.png',
                    width: 150,
                    //target : '#hint',
                    targetType : 'number',
                    targetFormat : 'Rating: {score}',
                    click: function(score, evt) {
                        showRatingForm();
                        $.ajax({
                               url: "/house/rating?id=${house.id}&rating="+score,
                               type: 'GET',
                               cache:false,
                               timeout:60000
                              })
                              .done(function(ret) {
                                   
                              })
                    }
                });
            }
        })

    var bookmarkButton = $(".bookmark");

    
    bookmarkButton.on("click", function() {
        if (bookmarkButton.data('bookmark-state') == 'empty') {
            commonAjax('/house/bookmark?id=${house.id}');
        } else if (bookmarkButton.data('bookmark-state') == 'added') {
            commonAjax('/house/unbookmark?id=${house.id}');
        }
    });
    
   

        
 </script>

</body>
</html>